<template>
  <div class="dorm">
    <van-nav-bar
      fixed
      border
      title="我的合同"
      left-arrow
      @click-left="goBack"
    />
    <div class="dorm_box" v-for="(item, index) in dormArr" :key="index">
      <p class="ThreeTitle">{{ item.park.pk_name }}</p>
      <div class="dorm_info">
        <div class="dorm_info_item">
          <p>
            <span class="Level">租赁位置：</span>
            <span class="text">{{ item.room }}</span>
          </p>
          <p>
            <span class="Level">租赁面积：</span>
            <span class="text">{{ item.area }}㎡</span>
          </p>
          <p>
            <span class="Level">租期：</span>
            <span class="text">{{ item.start_time }}至{{ item.end_time }}</span>
          </p>
          <p>
            <span class="Level">缴费周期：</span>
            <span class="text">{{ item.clauses.cycle_collect }}月/次</span>
          </p>

          <p>
            <span class="Level">应收日期：</span>
            <span class="text">每月{{ item.clauses.rece_date }}日</span>
          </p>
          <p>
            <span class="Level">租金：</span>
            <span class="text">{{ item.rent_money }}元/月</span>
          </p>
          <p>
            <span class="Level">物业管理费及其他：</span>
            <span class="text">{{ item.other_amount }}元/月</span>
          </p>

          <p>
            <span class="Level">基本电费：</span>
            <span class="text">{{ item.clauses.power_tax_price }}元/月</span>
          </p>
          <!-- v-if="item.show_subsist" -->
          <van-button
            v-if="item.show_subsist"
            color="#1375FF"
            @click="getId(item.id)"
            block
            >申请续租</van-button
          >
          <!-- 	<p>
						<span class="Level ">电费单价：</span>
						<span class="text">1.5元/吨</span>
					</p>
					<p>
						<span class="Level ">水费单价：</span>
						<span class="text">19元/吨</span>
					</p> -->
        </div>
      </div>
    </div>
    <div class="NotYet" v-if="dormArr == '' || dormArr == null">
      <div class="NotYet_img">
        <van-image
          width="100"
          height="100"
          fit="contain"
          :src="`${publicPath}img/8.png`"
        />
      </div>
      <h3>当前暂无合同</h3>
    </div>
    <popupItem
      :show="show"
      @config="config"
      @cancle="cancle"
      :columns="lease"
    />
  </div>
</template>

<script>
import { NavBar, Image, Button } from "vant";
import { getDorm, checkEndMonth, checkEndDateForHouse } from "@/api/index";
import popupItem from "@/components/popup_item";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Image.name]: Image,
    [Button.name]: Button,
    popupItem,
  },
  data() {
    return {
      dormArr: [],
      publicPath: process.env.BASE_URL,
      show: false,
      lease: ["1年", "2年"],
      DormId: "",
    };
  },
  async mounted() {
    this.dormArr = await getDorm();
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    getId(id) {
      this.DormId = id;
      this.show = true;
    },
    async config(list) {
      // this.form.lease = list;
      try {
        const res = await checkEndMonth({
          contract_id: this.DormId,
          years: list,
        });
        if (res == false) {
          try {
            const l = await checkEndDateForHouse({
              contract_id: this.DormId,
              years: list[0],
            });
            if (l.length > 0) {
              this.$dialog
                .confirm({
                  title: "温馨提示",
                  message: `${l[0].name}租赁到期时间最晚为${l[0].date}，自动为您续租至该日，是否继续`,
                })
                .then(() => {
                  this.$router.push({
                    path: "/clause",
                    query: { id: this.DormId, type: 2, years: list[0] },
                  });
                });
            } else {
              this.$router.push({
                path: "/clause",
                query: { id: this.DormId, type: 2, years: list[0] },
              });
            }
          } catch (error) {
            this.show = false;
            this.$dialog.alert({
              title: "温馨提示",
              message: error.message,
            });
          }
        } else {
          this.$dialog
            .confirm({
              title: "温馨提示",
              message:
                "根据规定，不可12月、1月、2月退租,将自动为您延续至3月31号,是否继续?",
            })
            .then(async () => {
              // on confirm
              try {
                const l = await checkEndDateForHouse({
                  contract_id: this.DormId,
                  years: list[0],
                });
                if (l.length > 0) {
                  this.$dialog
                    .confirm({
                      title: "温馨提示",
                      message: `${l[0].name}租赁到期时间最晚为${l[0].date}，自动为您续租至该日，是否继续`,
                    })
                    .then(() => {
                      this.$router.push({
                        path: "/clause",
                        query: { id: this.DormId, type: 2, years: list[0] },
                      });
                    });
                } else {
                  this.$router.push({
                    path: "/clause",
                    query: { id: this.DormId, type: 2, years: list[0] },
                  });
                }
              } catch (error) {
                this.show = false;
                this.$dialog.alert({
                  title: "温馨提示",
                  message: error.message,
                });
              }
            })
            .catch(() => {
              // on cancel
            });
        }
        this.show = false;
      } catch (error) {
        this.show = false;
        this.$dialog.alert({
          title: "温馨提示",
          message: error.message,
        });
      }
    },
    cancle(val, num) {
      this.show = false;
    },
  },
};
</script>

<style scoped lang="less">
.van-button--block {
  display: block;
  // width: 80%;
  margin: 6.133vw auto;
  border-radius: 2.667vw;
}
.NotYet {
  width: 95%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 15px 33px 0px rgba(138, 149, 158, 0.1);
  border-radius: 10px;
  margin: 20px auto;
  text-align: center;
  padding-bottom: 30px;
  padding-top: 30px;
  .NotYet_img {
    // padding:20px 0;
  }
  h3 {
    font-size: 25px;
    font-weight: bold;
    color: rgba(31, 39, 46, 1);
    margin: 10px auto;
  }
}
.dorm {
  margin: 70px auto;
}
.dorm_box {
  width: 95%;
  // height:293px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 15px 33px 0px rgba(138, 149, 158, 0.1);
  border-radius: 10px;
  margin: 20px auto;
  padding-bottom: 10px;
  .ThreeTitle {
    font-weight: bold;
    padding: 16px 13px;
  }
  .dorm_info {
    border-top: 1px solid #f1f1f1;
    .dorm_info_item {
      margin: 18px auto;
      padding: 0px 13px;
      p {
        margin: 15px auto;
      }
    }
  }
}

@media (min-width: 750px) {
  .van-button--block {
    display: block;
    // width: 80%;
    margin: 6.133vw auto;
    border-radius: 2.667vw;
  }
  .NotYet {
    width: 95%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 15px 33px 0px rgba(138, 149, 158, 0.1);
    border-radius: 10px;
    margin: 20px auto;
    text-align: center;
    padding-bottom: 30px;
    padding-top: 30px;
    .NotYet_img {
      // padding:20px 0;
    }
    h3 {
      font-size: 25px;
      font-weight: bold;
      color: rgba(31, 39, 46, 1);
      margin: 10px auto;
    }
  }
  .dorm {
    margin: 70px auto;
  }
  .dorm_box {
    width: 95%;
    // height:293px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 15px 33px 0px rgba(138, 149, 158, 0.1);
    border-radius: 10px;
    margin: 20px auto;
    padding-bottom: 10px;
    .ThreeTitle {
      font-weight: bold;
      padding: 16px 13px;
    }
    .dorm_info {
      border-top: 1px solid #f1f1f1;
      .dorm_info_item {
        margin: 18px auto;
        padding: 0px 13px;
        p {
          margin: 15px auto;
        }
      }
    }
  }
}
</style>
